<template>
    <div class="client-item">
      <div class="item-body">
        <div class="client-desc clearfix">
          <div class="label-list baby-list clearfix" v-if="client.baby_list">
            <div v-for="(baby, index) in client.baby_list " :key="index" class="label-item baby-item" :class="{'pink': baby.baby_sex === 'FEMALE#'}">
              <div class="pull-left">
                <span class="gender-ico gender-female" v-if="baby.baby_sex === 'FEMALE#'"></span>
                <span class="gender-ico gender-male" v-else ></span>
              </div>
              <div class="pull-right">
                <div class="baby-item-name">{{baby.baby_name}}</div>
                <div class="baby-item-date">{{baby.baby_birthday | formateBirthDay }}</div>
              </div>
            </div>
          </div>
          <div class="pull-left">
            <span class="img-wrapper" v-if="custom_type == 0"><img data-object-fit="cover" :src="client.head_img_url" /></span>
          </div>
          <div class="pull-left client-desc-basic-main" :class="{'no-margin-left': custom_type == 1}">
            <h3 class="client-desc-name clearfix" v-if="custom_type == 0 && client.nick_name">
              <span class="pull-left mgr-4">{{ client.nick_name }}</span>
              <a v-if="client.mobile_num" :href="'tel:' + client.mobile_num" class="mark-ovh"><i class="phone-mark mark-ico"></i></a>
              <span v-if="client.is_member == 1" class="mark-ovh"><i class="member-mark mark-ico"></i></span>
            </h3>
            <h3 class="client-desc-name clearfix" v-if="custom_type == 1 && client.parent_name">
              <span class="pull-left mgr-4">{{ client.parent_name }}</span>
              <a v-if="client.mobile_num" href="javascript:void(0);" class="mark-ovh"><i class="phone-mark mark-ico"></i></a>
              <span v-if="client.is_member == 1" class="mark-ovh"><i class="member-mark mark-ico"></i></span>
            </h3>
            <div class="client-desc-contact clearfix">
              <span v-if="custom_type == 0 && client.parent_name ">{{ client.parent_name }} /</span>
              <span v-if="client.mobile_num ">{{ client.mobile_num }}</span>
            </div>
            <!-- <span class="social-name" v-if="custom_type == 0" >{{ client.nick_name }}</span>
            <span class="social-name default-user" v-if="custom_type == 1" :class="{'no-margin':custom_type == 1}">{{ client.parent_name }}</span> -->
          </div>
        </div>
        <div class="property-desc">
          <p v-if="client.source">来源: {{ client.source }}</p>
          <p v-if="client.last_care_time">最新关怀时间: {{ client.last_care_time }}</p>
          <p v-if="isChaChong">所属团队: {{ client.team_name || '无'  }}</p>
          <p v-if="isChaChong">所属顾问: {{ client.user_name }}</p>
        </div>
        <div class="property-items clearfix">
          <div class="property-item">{{ client.custom_status | getStatename }}</div>
          <div class="property-item">{{ client.custom_property | getUserByType }}</div>
          <div class="pull-right">
            <router-link class="view-detail" :to="{path: selectFollow ? 'add-follow': 'normal-clients-detail',
                query:{custom_id:client.id, custom_type:custom_type, id:client.id, back:selectFollow ? 'follow-record' : false, dd_nav_bgcolor: 'FF5E97F6', 'action': isChaChong ? 'search' : ''}}">查看详情<i class="arrow-go-grey"></i></router-link>
          </div>
        </div>
        <!-- <div class="label-list baby-list">
          <label v-for="(baby, index) in client.baby_list " :key="index" class="label-item">
            <router-link :to="label.link">{{ label.name }}</router-link>
            <a href="javascript:void(0)">{{baby.baby_name}}</a>
          </label>
        </div> -->
      </div>
    </div>
</template>

<script>
import store from '../store'
var objectFitImages = require('object-fit-images');

  export default{
    props:{
      client: {
        type : Object,
        require: true
      },
      isChaChong: {
        type: Boolean,
        default: false
      },
      custom_type: {
        require:true
      },

      selectFollow: {
        default:false
      }
    },
    data () {
      return {

      };
    },
    methods:{

    },

    mounted () {
      console.log(this.custom_type, 'custom_typecustom_type')
      // this.custom_type = this.$route.custom_type
    },

    components:{

    },

    computed: {
      loginUser () {
        return this.$store.state.app.user
      }
    }
  }
</script>

<style>
.gender-female,.gender-male {
  font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif;
  font-weight: bolder;
}

.gender-female {
  color:#f75fb6;
}

.gender-male {
  color:#35adff;
}
</style>
<style lang="less">
  @import '../less/base.less';

  .client-item {
    background-color: white;
    padding: 8px 10px 0;
    color: #6E6E6E;
    margin: 10px 0;

    i {
      font-style: normal;
    }


    .baby-list {
    }

    .item-body{
      // padding-bottom: 15px;
      display: block;
    }


    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }
    }



    .baby-item {
      font-size: 13px;
      padding-top: 4px;
    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    .client-desc-basic-main {
      margin-left: 10px;
    }

    .client-desc-contact {
      font-size: 14px;
      line-height: 14px;
      margin: 4px 0px 0 0;
    }

    a,a:hover,a:visited,a:focus{
      // color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
    }

    .default-user {

    }

    .property-items {
      margin: 10px 0 6px 0;
      padding: 6px 0;
      border-top: 1px solid #F7F7F7;
    }

    .property-desc {
      p {
        padding: 2px 0;
      }
      font-size: 12px;
      color: #a9a6a6;
    }

    .property-item {
      display: inline-block;
      // padding-right: 12px;
      line-height: 12px;
      height: 12px;
      font-size: 12px;
      border: 1px solid #F7F7F7;
      color: #a9a6a6;
      border-radius: 6px;
      padding: 3px 8px;
    }

    .property-item:not(:first-child) {
      padding-left: 12px;
    }

    .property-item:not(:last-child) {
      // border-right: 1px solid #B2B2B2;
    }

    .phone {
      font-size: 12px;
      color: #8a8888;
      display: inline-block;
      margin: 0px 0 -2px 6px;
    }
    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

  }
</style>
